<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>商品列表</caption>
    <tr>
        <th>商品标题</th>
        <th>价格</th>
        <th>颜色</th>
    </tr>
</table>

<script>
    let p1 = {};
    p1.name = "zs";
    p1.age = 18;
    p1.run = function () {
        console.log(this.name + ":" + this.age);
    }
    p1.run();
    let p2 = {
        name: "ls",
        age: 30,
        run: function () {
            console.log(this.name + ":" + this.age);
        }
    }
    p2.run();
    let product = {title: "斯伯丁篮球", price: 108, color: "红色"};
    let arr = [{title: "斯伯丁篮球", price: 108, color: "红色"},
        {title: "威尔逊篮球", price: 158, color: "花色"},
        {title: "李宁篮球", price: 98, color: "蓝色"}];
    let t=document.querySelector("table");
    for (let p of arr) {
        //创建标签
        let tr = document.createElement("tr");
        let titleTd = document.createElement("td");
        let priceTd = document.createElement("td");
        let colorTd = document.createElement("td");
        //赋值
        titleTd.innerText = p.title;
        priceTd.innerText = p.price;
        colorTd.innerText = p.color;
        //添加到表格
        tr.append(titleTd, priceTd, colorTd);
        t.append(tr);
    }
</script>
</body>
</html>